<template>
  <div>
    <div class="list_wrap">
      <h1 :style="{color:titlecolor}">{{title}}</h1>
      <div class="list">
        <!-- :style="item.isTop?flestyle:''"  -->
          <span  @click="turnInfo(item.ID)" v-for="(item,index) in listdata" :key="index">
            <div class="list_one"  v-if="item.isState!=2">
                      <img :src="'http://localhost:3000'+item.Cpic" alt="">
                        <h2 class="cname">{{item.Cname}}</h2>
                        <div class="cdes">{{item.Cdescribe}}</div>
            </div>
          </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:["listdata","title","titlecolor"],
  data(){
    return{
      flestyle:{
        order:-1
      }
    }
  },
  methods: {
    turnInfo(ID,_id){ //点击课程跳转购买页
      this.$router.push({name:"coursebuy",query:{ID:ID} })
    }
  },
}
</script>
<style lang="less" >
  .list_wrap{
  h1{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    padding-left: 20px;
    box-sizing:border-box;
  }
  .list{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap:wrap;
    
  }
  .list_one{
    width: 170px;
    height: 200px;
    margin-top:10px ;
    background: white;
    img{
      width: 100%;
      height: 120px;
    }
    .cname{
      font-size: 20px;
      margin: 10px 0;
    }
    .cdes{
      color: #333;
    }
  }
}
</style>